<template>
  <div class="AlarmFlowBody">
    <el-divider content-position="left" style="">{{$t('流量告警策略')}}</el-divider>
    <el-table size='mini' ref="multipleTable" border :data="flowList" tooltip-effect="dark" style="width: 100%">
      <el-table-column prop="state" :label="$t('流量告警动作')" align='center' min-width="120">
        <template slot-scope="scope">
          {{ $t(nameList[scope.row['action-name']]) }}
        </template>
      </el-table-column>
      <el-table-column prop="state" :label="$t('流量监控策略状态')" align='center' min-width="120">
        <template slot-scope="scope">
          {{ $t(stateArray[scope.row.state]) }}
        </template>
      </el-table-column>
      <el-table-column prop="alarm-voice" :label="$t('告警声音开关')" align='center' min-width="120">
        <template slot-scope="scope">
          {{ $t(alarmVoiceArray[scope.row['alarm-voice']]) }}
        </template>
      </el-table-column>
      <el-table-column prop="alarm-method" :label="$t('告警信息发送方式')" align='center' min-width="120">
        <template slot-scope="scope">
          {{ $t(alarmMethodArray[scope.row['alarm-method']]) }}
        </template>
      </el-table-column>
      <el-table-column prop="severity" :label="$t('告警严重等级')" align='center' min-width="120">
        <template slot-scope="scope">
          {{ $t(severityArray[scope.row.severity]) }}
        </template>
      </el-table-column>
      <el-table-column prop="reciver" :label="$t('告警接收者')" align='center' min-width="120">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.reciver" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="interval" :label="$t('告警时间间隔')" align='center' min-width="120"></el-table-column>
      <el-table-column prop="right" align='center' fixed="right" :label="$t('操作')" min-width="120">
        <template slot-scope="scope">
          <el-button type="success" plain size="mini" @click="dialogVisible(scope.row)" :class="'edit' + (scope.$index + 1)">{{$t('编辑')}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <flow-dialog v-if="flowDialogVisible" ref="refFlowDialogVisible"></flow-dialog>
  </div>
</template>
<script>
import { getFlowAlertInfo } from '@/api/system/alarm/strategy'
import FlowDialog from './FlowDialog'
// import 'view-design/dist/styles/iview.css'
export default {
  name: 'AlarmFlow',
  components: {
    FlowDialog
  },
  data () {
    return {
      flowDialogVisible: false,
      flowList: [],
      stateArray: {
        'enable': '启用',
        'disable': '禁用'
      },
      alarmVoiceArray: {
        'on': '开',
        'off': '关'
      },
      alarmMethodArray: {
        'none': '无',
        'smtp': 'SMTP'
      },
      severityArray: {
        'critical': '紧急',
        'major': '重要',
        'minor': '次要',
        'warning': '提示'
      },
      nameList: {
        'mutation': '接口流量突变',
        'silence': '接口流量静默',
        'overflow': '接口流量溢出',
        'strategy': '策略流量监控'
      }
    }
  },
  created () {
    this.listData()
  },
  methods: {
    // 列表
    listData () {
      getFlowAlertInfo().then(res => {
        if (res.status === 0) {
          this.flowList = res.info
        }
      })
    },
    // 编辑按钮表单
    dialogVisible (data) {
      this.flowDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refFlowDialogVisible.init(data)
      })
    }
  }
}
</script>
<style lang="less">
.AlarmFlowBody {
  margin-top: 60px !important;

  .el-divider__text {
    font-size: 20px;
  }

  .el-divider {
    margin: 40px 0;
  }
}
</style>
